<template>
	<view class="recive-car">
		<view v-for="(title,titleIndex) in checkList" :key="titleIndex">
			<view class="select-block"  v-if="title.list.length !== 0 ">
				<view class="title">{{title.bigTypeName}}</view>
				<view class="selector">
					<SelectBox 
					  @select="onSelect($event, title.list)" 
					  :type="title.bigTypeCode === 'SE5004'? 'icon': 'label'" 
					  :list="title.list" />
				</view>
				<view class="bottom-line"></view>
			</view>
		</view>
		
		
		<!-- 弹窗-编辑其他 -->
		<u-popup 
			@close="editModalClose"
			v-model="showEditModal"
			mode="bottom"
			height="400rpx"
			closeable
		>
			<view class="other-modal">
				<u-input maxlength="100" 
					class="input" 
					:placeholder="editPlaceholder" 
					v-model="editValue" 
					type="text" 
					:border="border" 
				/>
				<u-button class="btn" @click="confirm" type="primary">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import SelectBox from '../checkbox.vue';
	import { request } from '@/config/request.js';
	import { vehicleInquiryData } from '@/api/carPreFlight.js';
	
	export default {
		components: {
			SelectBox
		},
		props:{
			listType:{type:String,default:'add'}
		},
		data() {
			return {
				type: [
					{ smTypeName: '其他', smTypeCode: '0', smTypeValue: '0', smTypeDesc: '' },
				],
				checkList:[],
				faultEvent: [],
				faultPosition: [],
				faultLight: [],
				maintainItem: [],
				mileage: 0, //保养里程
				showEditModal: false, //其他编辑弹窗 
				modalType: '', //当前打开的弹窗类型
				editValue: '',
			}
		},
		computed: {
			editPlaceholder() {
				const { modalType } = this;
				return modalType === 'mileage' ? '请输入里程' : '请输入其他内容';
			},
			formType(){
				return this.$store.state.carPreFlight.formType
			},
			formDetail(){
				console.log('$store',this.$store)
				if(this.formType !== 'add'){
					this.checkList = this.$store.state.carPreFlight.formDetail.inquiryVO
					return this.$store.state.carPreFlight.formDetail
				}				
			}
		},
		mounted() {
			console.log('formType---------------------',this.formType)
			if(this.formType === 'add'){
				this.queryData();
			} else {
				this.checkList = this.$store.getters.getcheckList				
			}			
		},
		methods: {
			// 获取接车问诊数据
			queryData() {
				const params = {};				
				vehicleInquiryData().then(res => {					
					this.checkList = res.rows
					console.log('checkList',this.checkList)
				}) 
			},
			// 点击选项
			onSelect({ item, index }, field) {
				// const list = this[field];
				const list = field;
				if(this.$store.getters.isEdit) return
				// 点击标签
				if(Number(item.smTypeCode) < 100) {
					const status = item.smTypeValue === '0' ? '1' : '0';
					list[index].smTypeValue = status;
					return;
				}
				
				// 点击其他
				this.modalType = field;
				this.editValue = item.smTypeDesc || '';
				this.showEditModal = true;
			},
			// 编辑其他弹窗-点击确认
			confirm() {
				if(this.modalType === 'mileage') {
					this.mileage = this.editValue;
					this.showEditModal = false;
					return;
				}
				
				const list = this[this.modalType];
				const index = list.length - 1;
				
				list[index].smTypeDesc = this.editValue;
				list[index].smTypeValue = this.editValue ? '1' : '0';
				
				this.showEditModal = false;
			},
			// 编辑其他弹窗-关闭
			editModalClose() {
				this.modalType = '';
			},
			// 点击编辑里程 
			clickMileage() {
				this.editValue = this.mileage;
				this.modalType = 'mileage';
				this.showEditModal = true;
			},
			// 获取接车问诊的数据
			getCurrentData() {				
				return 	this.checkList
				
				// return{
				// 	type,
				// 	faultEvent,
				// 	faultPosition,
				// 	faultLight,
				// 	maintainItem,
				// 	mileage
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	.recive-car{
		padding-bottom: 30rpx;
		background-color: #fff;
	}
	.select-block {
		padding: 30rpx 0 0 6rpx;
	}
	.title{
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333;
	}
	.bottom-line{
		position: relative;
		margin-left: 80rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;
		border-bottom: 1rpx solid #d9d9d9;
	}
	
	.bottom-line::before{
		content: '. . .';
		position: absolute;
		top: 4rpx;
		left: -50rpx;
		color: #d9d9d9;
	}
	.maintain-mile{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx 0 0;
		
		.mileage{
			font-size: 36rpx;
			font-weight: 500;
		}
			
		.unit{
			margin-right: 20rpx;
			font-size: 24rpx;
		}
		
	}
	.other-modal{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 60rpx;
		
		.input{
			width: 100%;
		}
		
		.btn{
			width: 100%;
			margin-top: 50rpx;
		}
	}
</style>
